<template>
  <el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane :header-row-style="{
    }" class="biaotou">
      <template #label>
        <span class="custom-tabs-label">
          <span>用户群流量分布</span>
        </span>
      </template>

      <el-table :data="tableData" border style="width: 100% " :header-cell-style="{
        background: '#e5e5e5',
        fontweight: 'bold',
        color: '#000000',
        height: '30px'
      }" :cell-class-name="tableRowClassName" :cell-style="{ textAlign: 'right' }" id="head">

        <el-table-column prop="date" label="用户群" width="170" sortable style="color:#8bc2f0">
          <el-table-column prop="date" width="150" :filters="[
            { text: '和平区家宽', value: '和平区家宽' },
            { text: '南开区家宽', value: '南开区家宽' },
            { text: '河东区集客', value: '河东区集客' },
            { text: '河西区集客', value: '河西区集客' },
            { text: '河北区家宽', value: '河北区家宽' },
            { text: '红桥区家宽', value: '红桥区家宽' },
            { text: '滨海新区集客', value: '滨海新区集客' },
            { text: '西青区集客', value: '西青区集客' },
            { text: '津南区家宽', value: '津南区家宽' },
          
          ]" :filter-method="filterTag">
            <template #header>
              <el-input v-model="input" style="height: 30px;" :value="test" @input="test = $event.target.value" />
            </template>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 0px;padding-left:-70px;color:#0183e4">{{ scope.row.date }}</span>
              </div>
            </template>

          </el-table-column>
        </el-table-column>

        <el-table-column prop="" label="总流量(Mbps)" width="150" sortable style="text-align:right">
          <el-table-column prop="all" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="" label="总流量占比(%)" width="150" sortable>
          <el-table-column prop="persent" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="" label="本省流量(Mbps)" width="150" sortable>
          <el-table-column prop="native" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="address" label="外省流量(Mbps)" width="150" sortable>
          <el-table-column prop="out" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="address" label="外网流量(Mbps)" width="150" sortable>
          <el-table-column prop="outnet" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="address" label="本省率(%)" width="150" sortable>
          <el-table-column prop="nativepersent" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="address" label="本网率(%)" width="150" sortable style="text-align:right">
          <el-table-column prop="nativenet" width="150"></el-table-column>
        </el-table-column>
      </el-table>

    </el-tab-pane>
    <el-tab-pane :header-row-style="{
    }" class="biaotou">
      <template #label>
        <span class="custom-tabs-label">
          <span>用户群流量趋势</span>
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { Calendar } from '@element-plus/icons-vue'
import { column } from 'element-plus/es/components/table-v2/src/common'

import { ref } from 'vue'
const activeName = ref('first')

// function change (e) {
//       this.$forceUpdate()
//     }


interface User {
  date: string,
  all: string,
  persent: string,
  native: string,
  out: string,
  outnet: string,
  nativepersent: string,
  nativenet: string
}


const filterTag = (value: string, row: User) => {
  return row.date === value
}



const tableData: User[] = [
  {
    date: '和平区家宽',
    all: '66.66',
    persent: '40.24',
    native: '54.47',
    out: '0.29',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  },
  {
    date: '河东区集客',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.45',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  },
  {
    date: '河西区集客',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.35',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  },
  {
    date: '南开区家宽',
    all: '66.66',
    persent: '40.24',
    native: '54.47',
    out: '0.29',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  },
  {
    date: '河北区家宽',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.45',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  },
  {
    date: '红桥区家宽',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.35',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  }, {
    date: '滨海新区集客',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.29',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  }, {
    date: '东丽区家宽',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.45',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  }, {
    date: '西青区集客',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.35',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  }, {
    date: '津南区家宽',
    all: '33.88',
    persent: '40.24',
    native: '54.47',
    out: '0.45',
    outnet: '33.88',
    nativepersent: '40.24',
    nativenet: '54.47'
  }
]


</script>
<style scoped>
:deep(.el-tabs__header .el-tabs__item:last-child) {
  font-size: large;
}

:deep(.el-tabs__header .el-tabs__item.is-active) {
  border-bottom: 6px solid;
  background-color: #e8f3fc;
}

:deep(.el-tabs__item) {
  height: 60px;

}

:deep(.el-tabs__content) {
  padding: 0px !important
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}



.biaotou {
  display: flex;
  flex-direction: row;

}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
  padding: 20px 20px 20px 0px;
  font-size: large;
}
</style>
